<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/html2canvas.js"></script>
    <script src="js/canvas2image.js"></script>
    <title>Document</title>
    <style>
        #container,
        #wrap {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            margin: 0;
        }
        
        #container {
            display: none;
        }
    </style>
</head>


<body>

    <div id="wrap">
        <h1>HTML-IMG</h1>
        <p>canvas 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 ​ 它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。
            ​ Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。 --------------------- 作者：做人要厚道2013 来源：CSDN 原文：https://blog.csdn.net/u012468376/article/details/73350998 版权声明：本文为博主原创文章，转载请附上博文链接！
        </p>
    </div>

    <div id="container"></div>


</body>
<script>
    function convert2canvas() {
        var YourTargetElem = $('#wrap')[0]

        var shareContent = YourTargetElem; //需要截图的包裹的（原生的）DOM 对象
        var width = shareContent.offsetWidth; //获取dom 宽度
        var height = shareContent.offsetHeight; //获取dom 高度
        var canvas = document.createElement("canvas"); //创建一个canvas节点
        var scale = 2; //定义任意放大倍数 支持小数

        canvas.width = width * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale; //定义canvas高度 *缩放
        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 

        var opts = {
            scale: scale, // 添加的scale 参数
            canvas: canvas, //自定义 canvas
            logging: true, //日志开关，便于查看html2canvas的内部执行流程
            width: width, //dom 原始宽度
            height: height,
            useCORS: true // 【重要】开启跨域配置
        };
        html2canvas(shareContent, opts).then(function(canvas) {
            var context = canvas.getContext('2d');
            // 【重要】关闭抗锯齿
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;

            var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
            // 【重要】默认转化的格式为png,也可设置为其他格式
            // var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
            $('#container').show()
            $("#container").html(img);
            $('#wrap').hide()
            $(img).css({
                "width": canvas.width / 2 + "px",
                "height": canvas.height / 2 + "px",
            })
        });
    }

    convert2canvas()
</script>

</html>